<template>
  <div class="chart-wrapper" :style="{ height: height + 'px' }">
    <div class="slot" v-if="title">
      <div class="plate-header">
        <span class="title">{{ title }}</span>
      </div>
    </div>
    <div class="slot">
      <div class="chart" :id="id" :style="{ height: height + 'px' }"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { calculateColorBrightness } from "@/lib/extension";
const ratio = JSON.parse(localStorage.ratio);

export default {
  name: "",
  data() {
    return {
      option: null,
      chartObj: null,
      useDualTheme: true,
      theme: "night",
      ratio: ratio,
    };
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      required: true,
    },
    yAxisName: {
      type: String,
    },
    chartColors: {
      type: Array,
      default: () => new Array("#22A857", "#FFFFFF"),
    },
    legendOrient: {
      type: String,
      default: "horizontal",
    },
    title: {
      type: String,
    },
    height: Number,
  },
  watch: {
    chartData: {
      handler(n,o) {
         if (n !== o) {
          this.updateChart();
        }
      },
      deep: true,
      immediate: true,
    },
    id: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    chartData: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    yAxisName: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    chartColors: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
    height: {
      handler(n) {
        this.updateChart();
      },
      immediate: true,
    },
  },
  methods: {
    updateChart() {
      this.determineTheme();
      this.$nextTick(() => {
        if (this.chartObj) {
          this.chartObj.setOption(this.option);
        } else {
          this.renderChart();
        }
      });
    },
    renderChart() {
      console.log("renderChart", this.chartData);
      let keys = Object.keys(this.chartData);
      let nodes = Object.values(this.chartData);
      console.log("nodes", nodes);
      this.option = {
        grid: {
          top: 50 * ratio,
          left: 0,
          right: 0,
          bottom: 5,
          containLabel: true,
        },
        title: {
          //   backgroundColor:"#22a857"
        },
        legend: {
          show: true,
          x: "right",
          top: this.legendOrient === "vertical" ? "top" : 5 * this.ratio,
          orient: this.legendOrient,
          data: keys,
          textStyle: {
            color: this.theme === "night" ? "#ffffff" : "#333",
            fontSize: 12 * ratio,
            lineHeight: 12 * ratio,
            fontFamily: "ali-m",
          },
        },
        xAxis: {
          type: "category",
          data: nodes[0].map((o) => o.name),
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            fontSize: 12 * ratio,
            color: this.theme === "day" ? "#333" : "#fff",
          },
        },
        yAxis: [
          {
            name: this.yAxisName,
            type: "value",
            axisLine: { show: false },
            axisTick: {
              show: true,
              lineStyle: {
                color: this.theme === "day" ? "#333" : "#fff",
              },
            },
            axisLabel: {
              fontSize: 12 * ratio,
              color: this.theme === "day" ? "#333" : "#fff",
            },
            splitLine: { show: false },
          },
        ],
        series: nodes.map((o, i) => {
          return {
            type: "line",
            name: keys[i],
            data: o,
            symbol: "diamond",
            boundaryGap: false,
            lineStyle: {
              width: 2.5 * ratio,
              type: i === 0 ? "solid" : "dashed",
              color: this.chartColors[i],
            },
            itemStyle: {
              color: "#00000000",
              borderWidth: 0,
            },
            areaStyle: {
              opacity: 0.33,
              color: this.chartColors[i],
            },
            label: {
              show: false,
            },
          };
        }),
      };
      let chartWrapper = document.getElementById(this.id);
      this.chartObj = echarts.init(chartWrapper, null, {
        renderer: "svg",
      });
      this.chartObj.setOption(this.option);
      this.chartObj.resize();
      window.onresize = () => {
        this.chartObj.resize();
      };
    },
    determineTheme() {},
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
}
</style>